<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<script src="js/mock.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/database.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/shop-cart.css" />
	</head>
	<body>
		<header>
			<img src="img/back.svg" class="back" id="back">
			<h1 class="mui-title">购物车</h1>
			<img src="img/top-chose.png" class="header-right">
		</header>
		<div id="shop-menu">
			<ul id="shop-ul">
				<li id="best" title="1599" class="flex">
					<input type="checkbox" class="int" id="intone" checked="checked">
					<label for="intone"></label>
					<div id="shop-box" class="space-around">
						<div class="shop-img">
							<img src="img/clothing2.png">
						</div>
						<div class="shop-text">
							<p class="blackp">外套黑色户外专业</p>
							<span class="gray">黑色</span>
							<p class="value"><span title="1599">￥1599</span><del>￥1699</del></p>
						</div>
					</div>
					<div class="number">
						<button type="button" class="jian">-</button><input type="button" class="num" value="1"><button type="button"
						 class="jia">+</button>
					</div>
				</li>
				<li title="49" class="flex">
					<input type="checkbox" class="int" id="inttwo" checked="checked">
					<label for="inttwo"></label>
					<div class="shop-box space-around">
						<div class="shop-img">
							<img src="img/clothing1.png">
						</div>
						<div class="shop-text">
							<p class="blackp">白色外套</p>
							<span class="gray">白色</span>
							<p class="value"><span title="49">￥49</span></p>
						</div>
					</div>
					<div class="number">
						<button type="button" class="jian">-</button><input type="button" class="num" value="1"><button type="button"
						 class="jia">+</button>
					</div>
				</li>
				<li title="59" class="flex">
					<input type="checkbox" class="int" id="intthree" checked="checked">
					<label for="intthree"></label>
					<div class="shop-box space-around">
						<div class="shop-img">
							<img src="img/clothing5.png">
						</div>
						<div class="shop-text">
							<p class="blackp">外套</p>
							<span class="gray">棕色</span>
							<p class="value"><span title="59">￥59</span><del>￥69</del></p>
						</div>
					</div>
					<div class="number">
						<button type="button" class="jian">-</button><input type="button" class="num" value="1"><button type="button"
						 class="jia">+</button>
					</div>
				</li>
			</ul>
		</div>
		<div id="foot" class="flex">
			<input type="checkbox" class="intall" id="intall" checked="checked">
			<label id="lastla" for="intall"></label><span class="allchose">全选</span>
			<div class="valuebox">
				合计:<span id="allvalue">
					￥<span id="alto">

					</span>
				</span>
			</div>
			<button id="jiesuan" type="button">结算<span id="numberbtn"></span></button>
		</div>
	</body>
	<script src="js/resultbank.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function shopnum() {
			var jia = document.getElementsByClassName('jia');
			var jian = document.getElementsByClassName('jian');
			var inall = document.getElementsByClassName('num');
			var check = document.getElementsByClassName('int');
			var allcheck = document.getElementById('intall');
			var allvalue = document.getElementById('alto');
			var shopul = document.getElementById('shop-ul');
			var oli = shopul.getElementsByTagName('li');

			for (var i = 0; i < jia.length; i++) {
				jia[i].index = i;
				jian[i].index = i;
				check[i].index = i;
				allcheck.onclick = function() {
					var alt = oli[0].title * inall[0].value + oli[1].title * inall[1].value + oli[2].title * inall[2].value
					for (var i = 0; i < jia.length; i++) {
						if (this.checked) {
							check[i].checked = true;
							allvalue.innerHTML = alt
						} else {
							check[i].checked = false;
							allvalue.innerHTML = 0;
						}
					}
				}
				var sp = Number(allvalue.innerHTML)
				allvalue.innerHTML = oli[i].title * inall[i].value + sp;
				check[i].onclick = function() {
					var sp = Number(allvalue.innerHTML)
					var op = Number(oli[this.index].title * inall[this.index].value);
					if (this.checked) {
						allvalue.innerHTML = oli[this.index].title * inall[this.index].value + sp;
					} else {
						allcheck.checked = false
						allvalue.innerHTML = sp - op;
					};
					if (check[0].checked && check[1].checked && check[2].checked) {
						allcheck.checked = true
					}
				}
				jia[i].onclick = function() {

					inall[this.index].value = parseInt(inall[this.index].value) + 1;
					var sp = Number(allvalue.innerHTML)
					var op = Number(oli[this.index].title * inall[this.index].value);
					var nowone = Number(oli[this.index].title)
					if (check[this.index].checked) {
						allvalue.innerHTML = sp + nowone;
					} else if (!check[this.index].checked) {
						allvalue.innerHTML = sp;
					}
				}
				jian[i].onclick = function() {
					var sp = Number(allvalue.innerHTML)
					var op = Number(oli[this.index].title * inall[this.index].value);
					if (check[this.index].checked) {
						if (inall[this.index].value != 0) {
							allvalue.innerHTML = sp - oli[this.index].title;
						} else {
							return false
						}
					} else if (!check[this.index].checked) {
						allvalue.innerHTML = sp;
					}
					if (inall[this.index].value <= 0) {
						inall[this.index].value = 0;
					} else {
						inall[this.index].value = parseInt(inall[this.index].value) - 1;
					}

				}
			}
		}
		shopnum()
		
		document.addEventListener('plusready', function() {
			back.addEventListener('touchend', function() {
				plus.webview.open('home.html', 's', {}, 'slide-in-left', 400)
			})
			})
	</script>
</html>
